const { defineConfig } = require('@vue/cli-service');
const lessVars = require('./src/common/css/var.ts');
const { getThemeVariables } = require('ant-design-vue/dist/theme');
const path = require("path");
module.exports = defineConfig({
  publicPath: './',
  outputDir: process.env.VUE_APP_FILE_Name,
  assetsDir: 'static',
  transpileDependencies: true,
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: true,
          localIdentName: '[name]_[local]__[hash:base64]',
        }
      },
      less: {
        lessOptions: {
          modifyVars: {
            ...getThemeVariables(),
            ...lessVars
          },
          javascriptEnabled: true
        },
        additionalData: `@import "@/common/css/index.less";`,
      },
    },
  },
  devServer: {
    port: 8090,
    client: {
      overlay: {
        runtimeErrors: false,
      },
    },
  },
  chainWebpack: config => {
    // 原svg规则覆盖了所有的svg图标，需要先将自己的svg排除，以应用新的sprite规则
    // src/assets/icons是我们将要存放svg的目录
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons')) // 排除自定义svg目录
      .end()
    config.module
      .rule('icons') // 新规则
      .test(/\.svg$/)
      .include.add(path.join(__dirname, 'src/assets/icons')) // 新规则应用于我们存放svg的目录
      .end()
      .use('svg-sprite-loader') // 用sprite-loader接卸
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  configureWebpack: {
    name: "海伦钢琴售后管理中心",
  },
})
